<script setup lang="ts">
import { ref, onMounted } from "vue";
import dayjs from "dayjs";
import { getUserDetail } from "@/api/system/user";
// 传值
const props = defineProps({
  //  1: 新增 2: 编辑
  userId: {
    type: Number,
    default: null
  },
  age: {
    type: Number,
    default: null
  }
});

const userData = ref<any>({});
onMounted(() => {
  if (props.userId) {
    getUserDetail({ id: props.userId }).then(res => {
      userData.value = res.data || {};
    });
  }
});
</script>

<template>
  <el-form ref="ruleFormRef" label-width="160px" class="mr-12">
    <el-form-item label="姓名" prop="name">
      <div>{{ userData.name || "--" }}</div>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <div>{{ userData.sex == 1 ? "男" : "女" }}</div>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <div>{{ userData.id && props.age ? props.age : "--" }}</div>
    </el-form-item>
    <el-form-item label="出生年月" prop="birthday">
      <div>
        {{
          userData.birthday
            ? dayjs(userData.birthday).format("YYYY-MM-DD")
            : "--"
        }}
      </div>
    </el-form-item>
    <el-form-item label="学位" prop="degree">
      <div>{{ userData.degree || "--" }}</div>
    </el-form-item>
    <el-form-item label="职称" prop="obtainDate">
      <div>
        {{
          userData.titleNameList && userData.titleNameList.length > 0
            ? userData.titleNameList.join(",")
            : "--"
        }}
      </div>
    </el-form-item>
    <el-form-item label="研究方向" prop="obtainDate">
      <div>{{ userData.direction || "--" }}</div>
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped>
:deep(.el-form-item) {
  font-weight: bold;
}
</style>
